<template>
  <section>
    <section class="introduce">
      <section class="introduce-desc padding marginTop">
        <p class="introduce-title">公司简介</p>
        <img class="img" src="@/assets/images/aboutUs/Frame-245.jpg" lazy-load />
        <p>艾瑞斯生物技术（深圳）有限公司</p>
        <p>
          艾瑞斯是一家拥有虹膜识别核心技术和完全自主知识产权的国家级高新技术企业，专注于从事生物特征识别
          技术研究。公司致力于为行业用户提供生物特征识别技术和解决方案，并构建超大规模的安全身份认证系统
          。是国内专业从事信息安全保密、虹膜生物特征识别的信息科技研究公司。
          公司在韩国首尔设立的技术研究所是韩国唯一一家拥有多国国际发明专利的虹膜算法机构。产品已广泛应用
          于LG手机、三星手机，银行/医院/军队等身份识别系统。也是全球唯一一家被中国李克强总理，韩国朴槿惠，保加利亚前总统普列涅利耶夫，高通创始人萨尔马西等多国领导人高度认可的虹膜识别技术公司。
        </p>
        <ul>
          <li>
            <span>2000＋</span>
            <span>服务企业客户</span>
          </li>
          <li>
            <span>260座</span>
            <span>城市</span>
          </li>
          <li>
            <span>150＋</span>
            <span>扩展全行业</span>
          </li>
        </ul>
      </section>
      <section class="introduce-process padding marginTop">
        <p class="introduce-title">发展历程</p>
        <img class="img" :src="listDetail[timeIndex].img" lazy-load />
        <ul>
          <li
            v-for="(item, index) in listTime"
            :key="index"
            @click="handleTime(index)"
            :ref="setRef"
          >
            <span :class="{ 'active': timeIndex == index }"></span>
            <i :class="{ 'activeT': timeIndex == index }">{{item}}</i>
          </li>
        </ul>
        <div>
          <p>{{listDetail[timeIndex].time}}</p>
          <p>{{listDetail[timeIndex].desc}}</p>
        </div>
      </section>
      <section class="padding marginTop introduce-certificate">
        <p class="introduce-title">荣誉专利</p>
        <img class="img" src="@/assets/images/aboutUs/image-32.jpg" lazy-load />
        <ul>
          <li>2010年、2008年韩国国内首家在KISA(韩国网络振兴院）通过算法性能和标准符合度认证的企业</li>
          <li>·2015年再次通过了KISA虹膜识别算法性能认证，2016年再次通过标准符合度认证</li>
          <li>·获得ITU**TELECOM WORLD2015中最优秀的企业家奖（ITU Telecom World Enterpreneurship Awards2015)、优秀奖（ITU Telecom World Recognition of Excellence)等2个部分的大奖 *KISA:Korea Internet&Security</li>
          <li>**ITU:联合国管辖下的国家电信联盟</li>
        </ul>
      </section>
    </section>
  </section>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
//定义ts 接口类型
interface editFormDataType {
  time: string
  img: string
  desc: string
}
const listTime = reactive(['2011', '2019', '2021', '2021'])
let timeIndex = ref(0)
const listDetail = reactive([
  {
    time: '2011年',
    desc: '投资成立韩国Irience研究所',
    img: new URL(
      `../../../assets/images/aboutUs/Rectangle-28.jpg`,
      import.meta.url
    ).href,
  },
  {
    time: '2019年11月',
    desc: '洽谈中韩合资企业',
    img: new URL(
      `../../../assets/images/aboutUs/Rectangle-175.jpg`,
      import.meta.url
    ).href,
  },
  {
    time: '2021年6月',
    desc: '有限合伙成立',
    img: new URL(
      `../../../assets/images/aboutUs/Rectangle-29.jpg`,
      import.meta.url
    ).href,
  },
  {
    time: '2021年9月',
    desc: '中国正式成立中韩合资公司艾瑞斯生物',
    img: new URL(
      `../../../assets/images/aboutUs/Frame-293.jpg`,
      import.meta.url
    ).href,
  },
])
const timeLime = (index: number) => {
  ;(product.value[index] as HTMLElement).scrollIntoView({
    behavior: 'smooth',
    inline: 'center',
    block: 'nearest',
  })
}
const handleTime = (index: number) => {
  timeIndex.value = index
  timeLime(index)
}
const product = ref([])
const setRef = (el: HTMLElement) => {
  ;(product.value as Array<HTMLElement>).push(el)
}
</script>

<style lang="scss" scoped>
.introduce {
  &-title {
    font-size: 44px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #2087e3;
    margin-bottom: 60px;
  }
  .padding {
    padding-left: 24px;
    padding-right: 24px;
  }
  .marginTop {
    margin-top: 60px;
  }
  &-desc {
    color: #686868;
    line-height: 48px;
    p {
      &:nth-of-type(2) {
        font-size: 32px;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
        color: #333;
        line-height: 32px;
        margin: 40px 0;
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      margin-top: 60px;
      color: #333;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
      font-weight: 700;
      line-height: initial;
      li {
        display: flex;
        flex-direction: column;
        span {
          &:first-child {
            font-size: 36px;
            color: #2087e3;
            margin-bottom: 24px;
          }
        }
      }
    }
  }
  &-process {
    padding: 60px 0;
    background: linear-gradient(
      0deg,
      rgba(32, 135, 227, 0.2) 0%,
      rgba(123, 189, 248, 0.15) 100%
    );
    ul {
      display: flex;
      overflow-x: scroll;
      margin: 42px 0 40px;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-right: 145px;
        span {
          width: 32px;
          height: 32px;
          background: #c4c4c4;
          border: 1px solid #aaaaaa;
          border-radius: 50%;
          margin-bottom: 17px;
        }
        i {
          font-style: normal;
        }
        &::after {
          content: ''; // 必须
          position: absolute;
          left: 48px;
          top: 16px;
          width: 180px;
          height: 1px;
          background-color: #aaa;
        }
        &:last-child {
          margin-right: 0;
          &::after {
            width: 0;
          }
        }
        .active {
          background-color: #2087e3;
          border-color: #2087e3;
        }
        .activeT {
          color: #2087e3;
        }
      }
    }
    div {
      p {
        text-align: center;
        font-size: 32px;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
      }
    }
  }
  &-certificate {
    font-size: 32px;
    line-height: 54px;
    word-break: break-all;
  }
}
</style>